import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { Fragment, Suspense } from 'react'
import { Avatar, Button, Dropdown, Layout, Message } from '@arco-design/web-react'
import { Outlet, useNavigate } from 'react-router'
import { RoimMenuGroup } from '@/consts/system.ts'
import { GroupMenu, Icon } from '@/components/web-react'
import { _PAGE_ } from '@/consts/system.ts'

interface IProps {
  children?: ReactNode
}

const Ruim: FC<IProps> = () => {
  const navigate = useNavigate()
  return (
    <Fragment>
      <Layout className={'w-full h-screen bg-base-plate'}>
        <Layout.Sider className={'w-full h-full'}>
          <div
            className={
              'w-full h-full overflow-hidden hover:overflow-y-auto custom-scrollbar'
            }
          >
            <div
              className={
                'sticky top-0 bg-white/10 backdrop-blur-lg w-full h-[56px] flex items-center justify-center cursor-pointer select-none'
              }
              onClick={() => navigate(`/loading/${_PAGE_.ruom.label}`)}
            >
              <img
                src={'./logo1.png'}
                alt={'...'}
                className={'hover:scale-90 transition duration-200'}
              />
            </div>
            <div className={'w-full h-auto box-border px-4 py-4'}>
              <GroupMenu group={RoimMenuGroup}></GroupMenu>
            </div>
          </div>
        </Layout.Sider>
        <Layout className={''}>
          <Layout.Header className={'w-full h-[56px] bg-white py-4 px-2'}>
              <div className='flex items-center justify-between h-full w-full'>
                <div className='flex items-center gap-4 h-full ml-4'>
                  <Button shape='round' size='small' type='secondary' >首页</Button>
                  <Button shape='round' size='small' type='secondary' >灵感记录</Button>
                  <Button shape='round' size='small' type='secondary' >浏览历史</Button>
                </div>
                <div className='flex items-center gap-4 h-full'>
                  <Button shape='round' size='small' type='secondary' onClick={() => navigate('/loading/login')}>退出登录</Button>
                  <div onClick={()=>{Message.info('功能暂未开放')}} className={"hover:text-primary-600 active:text-primary-700"}>
                    <Avatar size={36}>
                      <img src={'/src/assets/layout/user.jpg'} alt="..." />
                    </Avatar>
                    <span className={"ml-2"}>自由的风</span>
                  </div>
                  <Dropdown droplist={<div></div>} trigger='click' position="br">
                    <span className={'cursor-pointer'}>
                      <Icon name={'drop-down'}></Icon>
                    </span>
                  </Dropdown>
                </div>
              </div>
          </Layout.Header>
          <Layout.Content className={'box-border px-4 pt-2'}>
            <Suspense fallback={''}>
              <Outlet></Outlet>
            </Suspense>
          </Layout.Content>
        </Layout>
      </Layout>
    </Fragment>
  )
}

export default memo(Ruim)
